<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 100px;
            background-color: #00FFFF;
        }
    </style>
    <script>
        // 打印null，因为JS在页面元素加载之前就运行了。
        // console.log(document.querySelector("#btn2"));
        // onload事件，页面加载完成
        window.onload = function () {
            console.log(document.querySelector("#btn2"));
        }
    </script>
</head>
<body>
<div id="click_div">
    <button onclick="t1(event)">t1</button>
    <button id="btn2">t2</button>
    <button id="btn3">t3</button>
    <a href="http://www.baidu.com" onclick="t1(event)">百度一下</a>

</div>
<script>
    /*
        三种添加事件的方式
            写法上
            this关键字
     */
    function t1(e) {
        console.log("t1");
        console.log(this); // window对象
        // 阻止默认行为
        e.preventDefault();
        // 阻止冒泡
        e.stopPropagation();
    }

    function t2(e) {
        console.log("t2");
        console.log(this); // 触发事件的元素
    }
    document.querySelector("#btn2").onclick = t2;

    function t3(e) {
        console.log("t3");
        console.log(this);// 触发事件的元素
    }
    // 支持绑定多个函数
    document.querySelector("#btn3").addEventListener("click", t3);
    // 通过匿名函数添加
    document.querySelector("#btn3").addEventListener("click", function (e) {
        console.log("t4")
        console.log(e.target)
        console.log(e.type)
        console.log(e.cancelable)
    });

    document.querySelector("#btn2").onclick = null;
    document.querySelector("#btn3").removeEventListener("click", t3);
    // 无法移除匿名函数
    // document.querySelector("#btn3").removeEventListener("click", function () {
    //     console.log("t4")
    // });

    document.querySelector("#click_div").onclick = function () {
        console.log("div被点击了");
    }
</script>
</body>
</html>